<!--富文本组件-->
<template>
  <quill-editor v-model:content="value" content-type="html" :options="options" :key="cssId" />
</template>

<script setup>
import { QuillEditor, Quill } from "@vueup/vue-quill";
import "@vueup/vue-quill/dist/vue-quill.snow.css";
const LIST_OF_COLORS = [
  "#fff",
  "#58bc58",
  "#C0C0C0",
  "#808080",
  "#000000",
  "#FF0000",
  "#800000",
  "#FFFF00",
  "#808000",
  "#00FF00",
  "#008000",
  "#00FFFF",
  "#008080",
  "#0000FF",
  "#000080",
  "#FF00FF",
  "#800080",
]; //颜色
//富文本值
const value = defineModel("value", {
  type: String,
  required: false,
});
const cssId = defineModel("cssId", {
  type: String,
  required: false,
}); //样式ID
// 设置字体大小
const fontSize = Quill.import("attributors/style/size"); // 引入这个后会把样式写在style上
fontSize.whitelist = [false, "15rem", "20rem", "25rem", "30rem", "35rem", "40rem", "45rem", "50rem"];
Quill.register(fontSize, true);
defineProps(["modelValue"]);
const options = ref({
  theme: "snow",
  modules: {
    // 工具栏配置
    toolbar: [
      ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
      [{ header: [1, 2, 3, 4, 5, 6, false] }], // 1、2 级标题
      [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
      [{ script: "sub" }, { script: "super" }], // 上标/下标
      [{ indent: "-1" }, { indent: "+1" }], // 缩进
      [{ direction: "rtl" }], // 文本方向
      [{ size: fontSize.whitelist }], // 字体大小
      [{ align: [] }], // 对齐方式
      [
        {
          color: LIST_OF_COLORS,
        },
        {
          background: LIST_OF_COLORS,
        },
      ], // 字体颜色、字体背景颜色
      ["clean"], // 清除文本格式
    ],
  },
  placeholder: "请输入内容",
  readOnly: false,
});
</script>
<style lang="less">
.ql-container {
  width: 100%;
  .ql-editor {
    height: 360px;
  }
}
.ql-snow {
  .ql-picker.ql-size {
    .ql-picker-label:nth-child(1)::before,
    .ql-picker-item:nth-child(1)::before {
      content: "默认";
    }
    @sizes: 15rem 20rem 25rem 30rem 35rem 40rem 45rem 50rem;
    .loop(@i) when (@i <= length(@sizes)) {
      @value: extract(@sizes, @i);
      .ql-picker-label[data-value="@{value}"]::before,
      .ql-picker-item[data-value="@{value}"]::before {
        content: "@{value}";
      }
      .loop(@i + 1);
    }
    .loop(1);
  }
}
</style>
